.btn {
  position   : relative;
  display    : inline-block;
  font-weight: $btn-font-weight;
  line-height: $btn-line-height;
  color      : $white;
  @include button_size($btn-padding-y,
    $btn-padding-x,
    $border-radius,
    $btn-font-size);
  white-space        : nowrap;
  text-align         : center;
  vertical-align     : middle;
  background-image   : none;
  border             : $btn-border-width solid transparent;
  cursor             : pointer;
  // box-shadow      : $btn-box-shadow;

  &:focus {
    mask   : alpha;
    opacity: .9;
  }

  &.disabled,
  &[disabled] {
    cursor    : not-allowed;
    box-shadow: none;
    opacity   : $btn-disabled-opacity;

    // 所有子元素拒绝接收鼠标事件
    >* {
      pointer-events: none;
    }
  }
}

// 按钮大小
.btn-lg {
  @include button_size($btn-padding-y-lg,
    $btn-padding-x-lg,
    $border-radius-lg,
    $btn-font-size-lg);
}

.btn-sm {
  @include button_size($btn-padding-y-sm,
    $btn-padding-x-sm,
    $border-radius-sm,
    $btn-font-size-sm);
}

.btn-square {
  border-radius: 0;
}

.btn-circle {
  border-radius: 20px;

  &:hover {
    border-radius: 20px !important;
  }
}

// 危险按钮
.btn-danger {
  @include button_style($danger, $white);
}

// 成功按钮
.btn-success {
  @include button_style($success, $white);
}

// 警告按钮
.btn-warning {
  @include button_style($warning, $white);
}

// 消息按钮
.btn-info {
  @include button_style($info, $white);
}

// 主要按钮
.btn-primary {
  @include button_style($primary, $white);
}

// 默认按钮
.btn-default {
  color: #333;
}

// 渐变色
.btn-gradient {
  position          : relative;
  border            : 1px transparent solid;
  color             : #fff;
  background-size   : 400%;
  // animation      : flow 8s infinite linear;
  z-index           : 1;

  &::after {
    content        : "";
    position       : absolute;
    left           : -3px;
    right          : -3px;
    top            : -3px;
    bottom         : -3px;
    background-size: 400%;
    border         : 1px transparent solid;
  }


  &:hover::after {
    background-image: inherit;
    border-image    : inherit;
    z-index         : -1;
    animation       : flow 4s infinite linear;
    filter          : blur(3px);
  }
}

// 渐变色按钮，颜色流动
@keyframes flow {
  100% {
    background-position: -400% 0;
  }
}

// 故障按钮风格
.btn-fault {
  position: relative;
  z-index : 0;
  color   : #fff;

  &::before {
    content    : attr(data-content);
    position   : absolute;
    left       : 0px;
    right      : 0px;
    top        : 0px;
    bottom     : 0px;
    clip-path  : inset(100% 0% 0% 0%);
    text-shadow: -2px -2px 0px var(--color1), 2px 2px 0px var(--color2);
    z-index    : 999;
  }

  &:hover {
    animation: border 1s steps(1);
  }

  &:hover::before {
    animation: move 1s steps(1);
  }

}

@keyframes border {
  0% {
    border-color: $red;
  }

  20% {
    border-color: $yellow;
  }

  50% {
    border-color: inherit;
  }

  70% {
    border-color: $yellow;
  }

  100% {
    border-color: none;
  }
}

// @keyframes move {

//   0% {
//     clip-path: inset(80% 0% 0% 0%);
//     transform: translate(0, 0);
//   }

//   10% {
//     clip-path: inset(20% 0% 30% 0%);
//     transform: translate(2px, 2px);
//   }

//   20% {
//     clip-path: inset(10% 0% 40% 0%);
//     transform: translate(3px, 2px);
//   }

//   30% {
//     clip-path: inset(40% 0% 20% 0%);
//     transform: translate(1px, 2px);
//   }

//   40% {
//     clip-path: inset(60% 0% 30% 0%);
//     transform: translate(-2px, -3px);
//   }

//   50% {
//     clip-path: inset(10% 0% 60% 0%);
//     transform: translate(-3px, 2px);
//   }

//   60% {
//     clip-path: inset(30% 0% 10% 0%);
//     transform: translate(4px, 2px);
//   }

//   70% {
//     clip-path: inset(40% 0% 60% 0%);
//     transform: translate(-4px, -4px);
//   }

//   80% {
//     clip-path: inset(20% 0% 60% 0%);
//     transform: translate(4px, 1px);
//   }

//   90% {
//     clip-path: inset(80% 0% 30% 0%);
//     transform: translate(2px, 5px);
//   }

//   100% {
//     clip-path: inset(80% 0% 20% 0%);
//     transform: translate(0, 0);
//   }
// }

// 边框效果
.btn-frame {
  border: none;

  &:hover {
    border: none;
  }

  &::before,
  &::after {
    box-sizing   : inherit;
    position     : absolute;
    content      : '';
    border       : 2px solid transparent;
    width        : 0;
    height       : 0;
    border-radius: inherit;
  }

  &::before {
    left: 0;
    top : 0;
  }

  &::after {
    right : 0;
    bottom: 0;
  }

  &:hover::before,
  &:hover::after {
    width : 100%;
    height: 100%;
  }

  &:hover::before {
    border-top-color  : var(--borderColor);
    border-right-color: var(--borderColor);
    transition        : width 0.3s cubic-bezier(.99, .02, .66, .7), height 0.3s linear 0.3s;
  }

  &:hover::after {
    border-bottom-color: var(--borderColor);
    border-left-color  : var(--borderColor);
    transition         : border-color 0s linear 0.6s, width 0.3s linear 0.6s, height 0.3s cubic-bezier(0, .79, .83, 1.01) 1s;
  }
}